<template>
  <div class="homecontainer">
    <div
      class="homecard"
      v-for="(item, index) of cardLists"
      :key="item.id"
      @click="todetail(item.title)"
    >
      <div class="card-img">
        <img :src="item.imgUrl" alt="游戏图片" />
      </div>
      <div class="card-desc">
        <div class="card-text">
          <div class="text-title">{{ item.title }}</div>
          <div class="text-tag">{{ item.tag }}</div>
        </div>
        <div class="card-score">
          <img src="../../../assets/taptap.png" alt="taptap" class="taptap" />
          <div class="score">{{ item.score }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeCard",
  props: {
    cardLists: Array,
  },
  methods: {
    todetail(title) {
      this.$router.push({
        path: "detail",
        query: {
          gameName: title,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.homecontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  .homecard {
    display: flex;
    background: white;
    border-radius: 0.4rem;
    box-shadow: 0 1px 0.2rem $fontGrayColor;
    flex-direction: column;
    width: 90vw;
    margin-bottom: 1em;
    .card-img > img {
      width: 90vw;
      height: 3.8018rem;
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
    }
    .card-desc {
      display: flex;
      justify-content: space-between;
      .card-text {
        margin-left: 8vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .text-title {
          @include ellipsis;
          font-size: $titleFontSize;
          font-weight: 700;
          margin: 1em 0 0.5em 0;
        }
        .text-tag {
          font-size: $subTitleFontSize;
          margin-bottom: 1em;
        }
      }
      .card-score {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 5vw;
        .taptap {
        }
        .score {
          color: $themeColor;
          font-size: 0.6rem;
        }
        img {
          width: 16vw;
        }
      }
    }
  }
}
</style>